<template>
  <el-container>
    <el-main>
      <!-- 搜索框 -->
      <div>
        <el-row :gutter="20" type="flex" justify="spac-between" align="middle">
          <el-col :span="6">
            <el-input v-model="input" placeholder="请输入档案号/姓名"></el-input>
          </el-col>
          <el-col :span="2" class="butWord">
            <el-button type="primary" @click="searchBtn">查询</el-button>
          </el-col>
          <el-col class="butWord">
            <el-button type="primary" @click="addDialog = true">新增</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 页面表格 -->
      <div>
        <el-table :data="tableData" stripe style="width: 100%"
          :header-cell-style="{ 'background-color': ' rgb(39, 49,70)' }" class="table">
          <el-table-column prop="number" label="档案号" width="120" align="center"></el-table-column>
          <el-table-column prop="name" label="姓名" align="center"></el-table-column>
          <el-table-column prop="" label="评估日期" width="120" align="center">{{ tableData.date | dateFormat("YYYY-MM-DD")
          }}
          </el-table-column>
          <el-table-column prop="pinghezhi" label="平和质" align="center">
          </el-table-column>
          <el-table-column prop="qixuzhi" label="气虚质" align="center">
          </el-table-column>
          <el-table-column prop="yangxuzhi" label="阳虚质" align="center">
          </el-table-column>
          <el-table-column prop="yinxuzhi" label="阴虚质" align="center">
          </el-table-column>
          <el-table-column prop="tanshizhi" label="痰湿质" align="center">
          </el-table-column>
          <el-table-column prop="shirezhi" label="湿热质" align="center">
          </el-table-column>
          <el-table-column prop="xueyuzhi" label="血瘀质" align="center">
          </el-table-column>
          <el-table-column prop="qiyuzhi" label="气郁质" align="center">
          </el-table-column>
          <el-table-column prop="tebingzhi" label="特禀质" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-button @click="write(scope.row, scope.$index)" type="primary" size="small">编辑</el-button>
              <el-button @click="delSicker(scope.row.id)" type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
            :page-sizes="[5, 10, 30, 40, 50, 100]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
            :total="Number(count)">
          </el-pagination>
        </div>
      </div>
      <!-- 模态框 -->
      <!-- 新增模态框 -->
      <el-dialog title="新增" :visible.sync="addDialog" width="85%">
        <el-form :inline="true" ref="addData" :model="addData" class="addform">
          <el-form-item label="档案号">
            <el-input v-model="addData.memberId" placeholder="档案号" label-width="80px"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="addData.name" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item label="评估日期">
            <el-date-picker v-model="addData.date" align="right" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
              value-format="timestamp">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <!-- 答题页面 -->
        <el-tabs v-model="activeName">
          <el-tab-pane :key="item.name" v-for="item in testSubject" :label="item.title" :name="item.name">

            <el-table :data="item.content">
              <el-table-column type="index" width="40"></el-table-column>
              <el-table-column prop="question" label="请根据近一年的感觉，回答以下问题" width="300" align="center">
              </el-table-column>
              <el-table-column align="center">
                <template slot-scope="scope">
                  <el-radio-group v-model="scope.row.radio" @change="conutNumber(scope.row)">
                    <el-radio label="没有（根本不）"></el-radio>
                    <el-radio label="很少（有一点）"></el-radio>
                    <el-radio label="有时（有些）"></el-radio>
                    <el-radio label="经常（相当）"></el-radio>
                    <el-radio label="总是（非常）"></el-radio>
                  </el-radio-group>
                </template>
              </el-table-column>
            </el-table> 
          </el-tab-pane>
        </el-tabs>
        <el-row class="btn">
          <el-col :push="10">
            <el-button type="primary" addDialog="false" @click="submitForm">提交</el-button>
            <el-button @click="cancelInput" addDialog="false">取 消</el-button>
          </el-col>
        </el-row>
      </el-dialog>
      <!-- 编辑模态框 -->
      <el-dialog title="编辑" :visible.sync="writeDialog">
        <el-form :inline="true" :model="writeData" label-width="80px">
          <el-form-item label="档案号">
            <el-input v-model="writeData.number" placeholder="档案号"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="writeData.name" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item label="评估日期">
            <el-date-picker v-model="writeData.date" align="right" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
              value-format="timestamp">
            </el-date-picker>
          </el-form-item>
        </el-form>

        <el-row class="btn">
          <el-col :push="10">
            <el-button @click="writeDialog = false">取 消</el-button>
            <el-button type="primary" @click="confirmWrite">确 定</el-button>
          </el-col>
        </el-row>
      </el-dialog>
    </el-main>
  </el-container>

</template>

<script>
export default {
  data() {

    return {
      radio: '1',
      input: '',
      //模态框显示
      addDialog: false,
      writeDialog: false,
      //搜索数据
      findData: {},
      //页面表格数据
      tableData: [],

      /* 模态框 */

      // 新增模态框数据
      addData: {},
    
      // 新增模态框页面切换

      testSubject: [
        {
          title: '气虚质',
          name: '1',
          content: [
            { question: '您容易疲乏吗?', num: 0 },
            { question: '您容易气短(呼吸短促，接不上气)吗?', num: 0 },
            { question: '您容易心慌吗?', num: 0 },
            { question: '您容易头晕或站起时晕眩吗?', num: 0 },
            { question: '您比别人容易患感冒吗?', num: 0 },
            { question: '您喜欢安静、懒得说话吗?', num: 0 },
            { question: '您说话声音低弱无力吗?', num: 0 },
            { question: '您活动量稍大就容易出虚汗吗?', num: 0 },
          ],
        },
        {
          title: '阳虚质',
          name: '2',
          content: [
            { question: '您手脚发凉吗?', num: 0 },
            { question: '您胃院部、背部或腰膝部怕冷吗?', num: 0 },
            { question: '您感到怕冷、衣服比别人穿得多吗?', num: 0 },
            { question: '您比一般人耐受不了寒冷(冬天的寒冷，夏天的冷空调、电扇等)吗?', num: 0 },
            { question: '您比别人容易患感冒吗?', num: 0 },
            { question: '您吃(喝)凉的东西会感到不舒服或者怕吃(喝)凉的东西吗?', num: 0 },
            { question: '您受凉或吃（喝）凉的东西后,容易腹泻(拉肚子)吗?', num: 0 },
          ],

        },
        {
          title: '阴虚质',
          name: '3',
          content: [
            { question: '您感到手脚心发热吗?', num: 0 },
            { question: '您感觉身体、脸上发热吗?', num: 0 },
            { question: '您皮肤或口唇千吗?', num: 0 },
            { question: '您口唇的颜色比一般人红吗?', num: 0 },
            { question: '您容易便秘或大便干燥吗?', num: 0 },
            { question: '您面部两颊潮红或偏红吗?', num: 0 },
            { question: '您感到眼晴干涩吗?', num: 0 },
            { question: '您感到口千咽燥、总想喝水吗?', num: 0 },
          ],
        },
        {
          title: '痰湿质',
          content: [
            { question: '您感到胸闷或腹部胀满吗?', num: 0 },
            { question: '您感到身体沉重不轻松或不爽快吗?', num: 0 },
            { question: '您腹部肥满松软吗?', num: 0 },
            { question: '您有额部油脂分泌多的现象吗?', num: 0 },
            { question: '您上眼睑比别人肿(上眼睑有轻微隆起的现象)吗?', num: 0 },
            { question: '您嘴里有黏黏的感觉吗?', num: 0 },
            { question: '您平时痰多,特别是咽喉部总感到有痰堵着吗?', num: 0 },
            { question: '您舌苔厚腻或有舌苔厚厚的感觉吗?', num: 0 },
          ],
          name: '4',
        },
        {
          title: '湿热质',
          content: [
            { question: '您面部或鼻部有油腻感或者油亮发光吗?', num: 0 },
            { question: '您易生痤疮或疮疖吗?', num: 0 },
            { question: '您感到口苦或嘴里有异味吗?', num: 0 },
            { question: '您大便黏滞不爽、有解不尽的感觉吗?', num: 0 },
            { question: '您小便时尿道有发热感、尿色浓(深)吗?', num: 0 },
            { question: '您带下色黄(白带颜色发黄)吗?(限女性回答)', num: 0 },
            { question: '您的阴囊部位潮湿吗?〔限另性回答)', num: 0 },
          ],
          name: '5',
        },
        {
          content: [
            { question: '您的皮肤在不知不觉中会出现青紫瘀斑(皮下出血)吗?', num: 0 },
            { question: '您两颧部有细微红丝吗?', num: 0 },
            { question: '您身体上有哪里疼痛吗?', num: 0 },
            { question: '您面色晦黯、或容易出现褐斑吗?', num: 0 },
            { question: '您容易有黑眼圈吗?', num: 0 },
            { question: '您容易忘事（健忘）吗?', num: 0 },
            { question: '您口唇颜色偏黯吗?', num: 0 },
          ],
          title: '血瘀质',
          name: '6',
        },
        {
          title: '气郁质',
          content: [
            { question: '您感到闷闷不乐、情绪低沉吗?', num: 0 },
            { question: '您容易精神紧张、焦虑不安吗?', num: 0 },
            { question: '您多愁善感、感情脆弱吗?', num: 0 },
            { question: '您容易感到害怕或受到惊吓吗?', num: 0 },
            { question: '您胁肋部或乳房胀痛吗?', num: 0 },
            { question: '您无缘无故叹气吗?', num: 0 },
            { question: '您咽喉部有异物感，且吐之不出、咽之不下吗?', num: 0 },
          ],
          name: '7',
        },
        {
          title: '特禀质',
          content: [
            { question: '您没有感冒时也会打喷嚏吗?', num: 0 },
            { question: '您没有患冒时也会鼻塞、流鼻涕吗?', num: 0 },
            { question: '您有因季节变化、温度变化或异味等原因而咳喘的现象吗?', num: 0 },
            { question: '您容易过敏(对药物、食物、"气味、花粉或在季节交替、气候变化时)吗?', num: 0 },
            { question: '您的皮肤容易起荨麻疹(风团、凤疹块、风疙瘩)吗?', num: 0 },
            { question: '您的皮肤因过敏出现过紫癜(紫红色瘀点、瘀斑)吗?', num: 0 },
            { question: '您的皮肤一抓就红，并出现抓痕吗?', num: 0 },
          ],
          name: '8',
        },
        {
          title: '平和质',
          content: [
            { question: '您精力充沛吗?', num: 0 },
            { question: '您容易疲劳吗?', num: 0 },
            { question: '您说话声音低弱无力吗?', num: 0 },
            { question: '您感到闷闷不乐、情绪低沉吗?', num: 0 },
            { question: '您比一般人耐受不了寒冷（冬天的寒冷、夏天的空调、电扇等）吗?', num: 0 },
            { question: '您能适应外界自然和社会环境的变化吗?', num: 0 },
            { question: '您容易失眠吗?', num: 0 },
            { question: '您容易忘事吗?', num: 0 },
          ],
          name: '9',
        }
      ],
      // 编辑模态框数据
      writeData: {},
      
      //分页
      limit: 5,
      page: 1,
      count: 0,
      scoreall: 0,
      allSocre: [],//总分
      activeName: '1',
    };
  },

  methods: {
    //搜索档案号/姓名
    searchAll() {
      if (Number(this.input)) {
        this.$axios({
          url: "/physiqueHealth/list",
          method: "post",
          data: {
            number: this.input.trim(),
            page: this.page,
            limit: this.limit,
          },
        }).then((res) => {
          this.tableData = res.data;
          this.count = res.count;
        }).catch((err) => {
          //console.log(res);
          //console.log(err);
        });
      } else {
        this.$axios({
          url: "/physiqueHealth/list",
          method: "post",
          data: {
            name: this.input.trim(),
            page: this.page,
            limit: this.limit,
          },
        }).then((res) => {
          this.tableData = res.data;
          this.count = res.count;
          this.input = '';
        }).catch((err) => {
          //console.log(err);
        });
      }
    },
    searchenter(val) {
      this.page = 1;
      this.input = val;
      this.searchAll();
    },
    searchBtn() {
      this.page = 1;
      this.searchAll();
    },
    //新增模态框
    conutNumber(item) {
      switch (item.radio) {
        case '没有（根本不）':
          item.num = 1;
          break;
        case '很少（有一点）':
          item.num = 2;
          break;
        case '有时（有些）':
          item.num = 3;
          break;
        case '经常（相当）':
          item.num = 4;
          break;
        case '总是（非常）':
          item.num = 5;
          break;
        default:
          "答案输入有误";
          break;
      }
    },

    //新增模态框提交按钮
    submitForm() {
      for (let j = 0; j < this.testSubject.length; j++) {
        for (let i = 0; i < this.testSubject[j].content.length; i++) {
          this.scoreall += this.testSubject[j].content[i].num

          //console.log(this.testSubject[j].content[i].num);
          if (this.testSubject[j].content[i].num == 0) {
            this.$message({
              type: "warning",
              message: "你有题目没答完哟!",
            });
            return;
          } else {
            if (i == this.testSubject[j].content.length - 1) {
              // //console.log(this.scoreall);
              this.allSocre.push(this.scoreall)
              this.scoreall = 0
            }
          }
        }
      }
      // //console.log(this.allSocre);
      for (let k = 0; k < this.testSubject.length; k++) {
        this.allSocre[k] >= 25 ? this.allSocre[k] = '是' : this.allSocre[k] = '否'
      }
      this.$axios({
        method: 'post',
        url: '/physiqueHealth/add',
        data: {
          "date": this.addData.date,
          "memberId": this.addData.memberId,
          "pinghezhi":  this.allSocre[8],
          "qixuzhi":  this.allSocre[0],
          "qiyuzhi":this.allSocre[6],
          "shirezhi":this.allSocre[4],
          "tanshizhi": this.allSocre[3],
          "tebingzhi": this.allSocre[7],
          "xueyuzhi": this.allSocre[5],
          "yangxuzhi": this.allSocre[1],
          "yinxuzhi": this.allSocre[2]
        }
      }).then(res => {
<<<<<<< HEAD
        //console.log(res);
=======
        console.log(res);
>>>>>>> 44776626cdfca83a0c353cea03fbdd8ca1670b88
        this.getList()
        this.addDialog = false;
      }).catch(err => {
        //console.log(err);
      })
    },
    //新增模态框下取消按钮
    cancelInput() {
      this.addDialog = false;
    },

    //编辑信息
    write(item, index) {
      //console.log(item);
      this.writeData = {
        number: item.number,
        name: item.name,
        date: item.date,
      }
      this.writeDialog = true;
    },
    //编辑模态框确定按钮
    confirmWrite() {
      this.$axios({
        method: 'post',
        url: '/physiqueHealth/update',
        data: {
          number: this.writeData.number,
          name: this.writeData.name,
          date: this.writeData.date,
        }
      }).then(res => {
<<<<<<< HEAD
        //console.log(res);
=======
        console.log(res);
>>>>>>> 44776626cdfca83a0c353cea03fbdd8ca1670b88
        this.getList();
        this.writeDialog = false;
      }).catch(err => {
        //console.log(err);
      })

    },
    //删除信息
    delSicker(id) {
      //console.log(id);
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          url: "/physiqueHealth/delete",
          method: "get",
          params: { id: id },
        })
          .then((res) => {
            this.getList();
          })
          .catch((err) => {
            //console.log(err);
          });
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //分页
    handleSizeChange(val) {
      this.limit = Number(val)
      this.getList()
    },
    handleCurrentChange(val) {
      this.page = Number(val)
      this.getList()
    },
    getList() {
      this.$axios({
        method: 'post',
        url: '/physiqueHealth/findAll',
        data: {
          limit: this.limit,
          page: this.page
        }
      }).then(res => {
        // //console.log(res.data.count);
        this.tableData = res.data;
        this.count = res.count;
      }).catch(err => {
        //console.log(err);
      })
    }
  },

  created() {
    this.getList()
  }
}
</script>

<style scoped>
.table {
  margin-top: 30px;
}

.block {
  margin-top: 30px;
  float: right;
}

el-input {
  width: 50%;
}

.btn {
  margin-top: 20px;
}
.addform{
  width: 100%;
 }
</style>